<template>
  <div class="appp">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <to-head :title="title" :time="time" />
        </div>
        <div class="warrHouse">
          <dv-border-box-11
            class="border1"
            title="正常配送"
            :color="['#122794', 'rgba(18, 39,148, 0.3)']"
          >
            <dv-scroll-board
              :config="config"
              class="table"
              style="height:60vh"
            />
          </dv-border-box-11>
        </div>

        <div class="warrHouse">
          <dv-border-box-11
            class="border2"
            title="异常配送"
            :color="['#122794', 'rgba(18, 39,148, 0.3)']"
          >
            <dv-scroll-board
              :config="config2"
              class="table"
              style="height:22vh"
            />
          </dv-border-box-11>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import ToHead from './components/eq/ToHead.vue'
import { sysQuery } from './api/dataApi'
export default {
  name: 'App',
  components: {
    ToHead,
  },
  data() {
    return {
      title: '制造一部仓库配送大屏',
      bjData: [],
      pageIndex: 0,
      eqname: '',
      timeInterval: null,
      eqPageList: [],
      config: null,
      config2: null,
      dataList: [],
      dataList2: [],
      vw: 0,
    }
  },
  created() {
    this.getData()
  },
  props: {
    time: {
      type: String,
      default: '',
    },
  },
  watch: {
    dataList(newData) {
      this.config = {
        header: [
          '生产订单号',
          '调拨申请单',
          '制单人',
          '属性',
          '备料行数',
          '备料时间',
          '期望配送时间',
          '配送车间',
          '调拨单',
          '产线',
          '状态',
          '备注',
        ],
        headerHeight: this.vw > 1912 ? 18 : 24,
        data: newData,
        index: false,
        columnWidth: [
          170,
          220,
          110,
          110,
          110,
          220,
          220,
          150,
          190,
          160,
          100,
          100,
        ],
        align: ['left'],
        headerBGC: ' ',
        // headerBGC: '#06144f',
        // oddRowBGC: '#06144f',
        oddRowBGC: ' ',
        // evenRowBGC: '#15235c',
        evenRowBGC: 'rgba(52,99,171,0.15)',
        waitTime: '5000',
        rowNum: 15,
      }
    },
    dataList2(newData) {
      this.config2 = {
        header: [
          '生产订单号',
          '调拨申请单',
          '制单人',
          '属性',
          '备料行数',
          '备料时间',
          '期望配送时间',
          '配送车间',
          '调拨单',
          '产线',
          '状态',
          '备注',
        ],

        headerHeight: this.vw > 1912 ? 18 : 24,
        data: newData,
        index: false,
        columnWidth: [
          170,
          220,
          110,
          110,
          110,
          220,
          220,
          150,
          190,
          160,
          100,
          100,
        ],
        align: ['left'],
        headerBGC: ' ',
        oddRowBGC: ' ',
        evenRowBGC: 'rgba(52,99,171,0.15)',
        waitTime: '5000',
        rowNum: 4,
      }
    },
  },

  mounted() {
    this.timeInterval = setInterval(() => {
      this.getData()
    }, 1000 * 60 * 5)
    this.vw =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth
  },
  methods: {
    getData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_workshop_delivery_chart'
      header['cx'] = '1MF1'
      const params = {
        _params: JSON.stringify(header),
        _conditions: JSON.stringify({
          cx: 'like_anywhere',
        }),
        pageIndex: -1,
        sortField: '',
        sortOrder: 'desc',
      }
      sysQuery(params)
        .then((res) => {
          const bodyD = res.data.filter((item) => item.djstate == '4')
          const headD = res.data.filter((item) => item.djstate !== '4')
          this.qThree(headD)
          this.qTwo(bodyD)
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    qTwo(data) {
      const _data = []
      data.forEach((item) => {
        const _m = []
        _m.push(
          `<span style="color:#ff4520">${
            item.mocode ? item.mocode : '-'
          } </span>`
        )
        _m.push(
          `<span style="color:#ff4520">${item.hcode ? item.hcode : '-'} </span>`
        )
        _m.push(
          `<span style="color:#ff4520">${
            item.billmaker ? item.billmaker : '-'
          } </span>`
        )
        _m.push(
          `<span style="color:#ff4520">${item.type ? item.type : '-'} </span>`
        )
        _m.push(
          `<span style="color:#ff4520">${item.num ? item.num : '-'} </span>`
        )
        _m.push(
          `<span style="color:#ff4520">${
            item.createtime ? item.createtime : '-'
          } </span>`
        )
        _m.push(
          `<span style="color:#ff4520">${item.ddate ? item.ddate : '-'} </span>`
        )
        _m.push(
          `<span style="color:#ff4520">${
            item.wc_name ? item.wc_name : '-'
          } </span>`
        )

        _m.push(
          `<span style="color:#ff4520">${
            item.nexthcode ? item.nexthcode : '-'
          } </span>`
        )
        _m.push(
          `<span style="color:#ff4520">${
            item.cxname ? item.cxname : '-'
          } </span>`
        )
        _m.push(
          `<span style="color:#ff4520">${item.state ? item.state : '-'} </span>`
        )
        _m.push(
          `<span style="color:#ff4520">${
            item.remark ? item.remark : '-'
          } </span>`
        )
        _data.push(_m)
      })
      this.dataList2 = _data
    },
    qThree(reportData) {
      const _reportData = []
      reportData.forEach((item) => {
        const _m = []
        // djstate = 1  (代表新订单 黄色)
        // djstate = 2  (代表正常订单 白色)
        // djstate = 3  (红色)
        // djstate = 4  (消失不管)
        if (item.djstate == '3') {
          _m.push(
            `<span style="color:#ff4520">${
              item.mocode ? item.mocode : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#ff4520">${
              item.hcode ? item.hcode : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#ff4520">${
              item.billmaker ? item.billmaker : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#ff4520">${item.type ? item.type : '-'} </span>`
          )
          _m.push(
            `<span style="color:#ff4520">${item.num ? item.num : '-'} </span>`
          )
          _m.push(
            `<span style="color:#ff4520">${
              item.createtime ? item.createtime : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#ff4520">${
              item.ddate ? item.ddate : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#ff4520">${
              item.wc_name ? item.wc_name : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#ff4520">${
              item.nexthcode ? item.nexthcode : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#ff4520">${
              item.cxname ? item.cxname : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#ff4520">${
              item.state ? item.state : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#ff4520">${
              item.remark ? item.remark : '-'
            } </span>`
          )
        } else if (item.djstate == '1') {
          _m.push(
            `<span style="color:#eee15f">${
              item.mocode ? item.mocode : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#eee15f">${
              item.hcode ? item.hcode : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#eee15f">${
              item.billmaker ? item.billmaker : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#eee15f">${item.type ? item.type : '-'} </span>`
          )
          _m.push(
            `<span style="color:#eee15f">${item.num ? item.num : '-'} </span>`
          )
          _m.push(
            `<span style="color:#eee15f">${
              item.createtime ? item.createtime : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#eee15f">${
              item.ddate ? item.ddate : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#eee15f">${
              item.wc_name ? item.wc_name : '-'
            } </span>`
          )

          _m.push(
            `<span style="color:#eee15f">${
              item.nexthcode ? item.nexthcode : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#eee15f">${
              item.cxname ? item.cxname : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#eee15f">${
              item.state ? item.state : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#eee15f">${
              item.remark ? item.remark : '-'
            } </span>`
          )
        } else if (item.djstate == '2') {
          _m.push(
            `<span style="color:#fff">${
              item.mocode ? item.mocode : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#fff">${item.hcode ? item.hcode : '-'} </span>`
          )
          _m.push(
            `<span style="color:#fff">${
              item.billmaker ? item.billmaker : '-'
            } </span>`
          )
          _m.push(
            `<span style="color:#fff">${item.type ? item.type : '-'} </span>`
          )
          _m.push(`<span style="color:#fff">${item.num} </span>`)
          _m.push(`<span style="color:#fff">${item.createtime} </span>`)
          _m.push(`<span style="color:#fff">${item.ddate} </span>`)
          _m.push(`<span style="color:#fff">${item.wc_name} </span>`)
          _m.push(`<span style="color:#fff">${item.nexthcode} </span>`)
          _m.push(`<span style="color:#fff">${item.cxname} </span>`)
          _m.push(`<span style="color:#fff">${item.state} </span>`)
          _m.push(`<span style="color:#fff">${item.remark} </span>`)
        }
        _reportData.push(_m)
      })
      this.dataList = _reportData
    },
    destroyed() {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    },
  },
}
</script>

<style lang="less" scoped>
.border1 {
  height: 65vh;
}
.border2 {
  height: 27vh;
}
.imgList {
  height: 39vh;
  img {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(4, 62, 168, 0.3);
  }
}
.description {
  padding-left: 10px;
  padding-right: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: #33ccff;
}

.appp {
  font-family: 'MicrosoftYaHei', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}
.bnr-con {
  height: 90vh;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 1vh;
  cursor: pointer;
}
.bnr-head {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 15px 15px;
  box-sizing: border-box;
  height: 10vh;
  .wx-head-con {
    flex: 1;
    border-radius: 4px;
    height: 100%;
    padding: 15px;
    margin-right: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;

    .left {
      width: 100px;
      font-size: 38px;
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      flex-wrap: nowrap;
      .num {
        font-size: 24px;
        margin-bottom: 1px;
        letter-spacing: 1px;
      }
      .title {
        font-size: 14px;
        color: #ccc;
      }
    }
  }
}

.left {
  padding: 0px 15px;
  .px2vh(line-height, 48);
  text-align: left;
  .px2font(13);
  .anticon {
    .px2font(20);
    vertical-align: middle;
  }
}
.tit {
  .px2font(17);
  .px2vh(padding-top, 10); // font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
}
.table {
  padding: 6rem 2rem 0rem 2rem;
  color: #ccc;
}

.runing {
  font-weight: bold;
  // background: rgba(51, 204, 255, 0.6);
  border: 1px solid #07d7ca;
  // box-shadow: inset 0px 0px 20px 0px rgba(2, 187, 124, 0.5);
  // box-shadow: inset 0px 0px 20px 0px rgba(51, 204, 255, 0.5);
  box-shadow: inset 0px 0px 20px 0px rgba(39, 255, 242, 0.5);
  .anticon {
    color: #27fff2 !important;
  }
  span {
    color: #27fff2 !important;
  }
}
.up {
  height: 51vh;
}
.down {
  height: 37vh;
  box-sizing: border-box;
  margin-top: 2vh;
}
.table-bg {
  background: url('./assets/images/bk2.png');
  background-size: 100% 100%;
  height: 37vh;
}
.name {
  text-align: left;
  padding-left: 15px;
  padding-right: 15px;
  p {
    line-height: 24px;
  }
  span {
    color: #ccc;
    font-size: 14px;
  }
  .hwname {
    color: #67e0e3;
    font-size: 13px;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.bjname {
  color: #1ed3e5;
  font-size: 1.5rem;
}
.eqname {
  position: absolute;
  right: 5%;
  top: 5%;
  color: #1ed3e5;
}

.warrper ::v-deep .dv-scroll-board .rows .ceil {
  color: #ccc !important;
}
.warrper ::v-deep .dv-scroll-board .header .header-item {
  color: #33ccff !important;
}

.warrper ::v-deep .ant-select-selection {
  border: 1px solid #122794;
}
.warrper ::v-deep .ant-fullcalendar-header {
  padding: 5px 16px 5px 0;
}

.ant-carousel .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
  cursor: pointer;
}

.ant-carousel .custom-slick-arrow {
  width: 50px;
  height: 50px;
  font-size: 50px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel .custom-slick-arrow:before {
  display: none;
}
.ant-carousel .custom-slick-arrow:hover {
  opacity: 0.9;
}

.ant-carousel .slick-slide h3 {
  color: #fff;
}
.imgstyle img {
  width: 100%;
  height: 100%;
}
</style>
